<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-20
  Time: 下午7:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="/css/sysCss/userAdmin.css">
</head>

<script type="text/javascript">
    /**
     *
     * @param url:跳转地址
     * @param type:类型，next为上一页，previous为下一页
     * @param page：当前页码
     * @param allPage：所有页数
     */
    function change(url,type,page,allPage) {
        //控制上一页下一页不出现越界的情况
        var previous=document.getElementById("previous")
        var next=document.getElementById("next");
        if (type=='previous' && page-1>=1){
            previous.href=url+"?"+"page="+(page-1);
        }else if (type=='next' && page+1<=allPage){
            next.href=url+"?"+"page="+(page+1);
        }
    }
</script>
<body>

<div class="futer-alert" id="al">
    操作失败
</div>

<div class="tableInfo">

    <div class="fu-option">
        <a href="/futer/addUser" class="btn btn-info fu-add">添加</a>
        <div class="input-group fu-seach">
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" name="search" placeholder="请输入要搜索的用户名" id="fu-search">
            <span class="input-group-addon" style="cursor: pointer" onclick="search()"><em class="glyphicon glyphicon-search"></em></span>
        </div>
    </div>

    <div class="tableContent">
        <table cellpadding="0" cellspacing="0" id="fu-userTable">

            <tr class="info">
                <td width="10" align="center"><input type="checkbox"/></td>
                <td width="100">名称</td>
                <td width="50">时间</td>
                <td width="50">类型</td>
                <td width="50">操作</td>
            </tr>

            <c:if test="${user!=null}">
                <c:forEach items="${user}" var="sh">

                    <tr class="info">
                        <td align="center"><input type="checkbox"/></td>
                        <td align="center">${sh.name}</td>
                        <td align="center"><f:formatDate value="${sh.createdate}" type="both" dateStyle="long"/></td>
                        <td align="center">${sh.type}</td>
                        <td align="left">
                            <a href="/futer/userDetail?name=${sh.name}">详情</a>
                            <c:if test="${sh.name!=sessionScope.name}">
                                <c:if test="${sh.id>sessionScope.id}">
                                    <a onclick="remove('${sh.name}','${sh.id}')">移除 </a>
                                </c:if>
                            </c:if>

                            <c:if test="${sh.name!=sessionScope.name && sessionScope.type=='admin'}">
                                <c:if test="${sh.id>sessionScope.id}">
                                    <c:if test="${sh.enable==0}">
                                        <a onclick="remove('${sh.name}','${sh.id}',1,this)">启用</a>
                                    </c:if>

                                    <c:if test="${sh.enable==1}">
                                        <a onclick="remove('${sh.name}','${sh.id}',0,this)">禁用</a>
                                    </c:if>
                                </c:if>
                            </c:if>

                        </td>
                    </tr>
                </c:forEach>
            </c:if>
        </table>
    </div>


    <div class="limit">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a aria-label="Previous" id="previous" onclick="change('/futer/userAdmin','previous',${currentPage},${allPage})">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:forEach items="${page}" var="p">
                    <c:if test="${p==currentPage}">
                        <li><a href="/futer/userAdmin?page=${p}" id="currentPageNum">${p}</a></li>
                    </c:if>

                    <c:if test="${p!=currentPage}">
                        <li><a href="/futer/userAdmin?page=${p}">${p}</a></li>
                    </c:if>
                </c:forEach>
                <li>
                    <a aria-label="Next" id="next" onclick="change('/futer/userAdmin','next',${currentPage},${allPage})">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <%--显示提示区域--%>
    <div class="alert" id="alert">
        <div class="msg" id="msg">
            是否确定删除？
        </div>
        <div class="b">
            <a id="yes" >是</a>
            <a id="no" >否</a>
        </div>
    </div>

    <script type="text/javascript">

        //修改当前页码按钮颜色
        var currentPageNum=document.getElementById("currentPageNum");
        currentPageNum.style.background='#B2B2B3';

        var al=document.getElementById("alert");
        var yes=document.getElementById("yes");
        var no=document.getElementById("no");
        var msg=document.getElementById("msg");

        if ('${login}'=='login'){
            parent.sengToLogin();
        }

        //隐藏操作提示
        function hiddenAl(){
            (document.getElementById("al")).style.display="none";
        }

        //disable有参数时为禁用用户，没有此参数时为删除用户
        function remove(name,id,disable,obj) {
            al.style.display='block';
            if (disable!=null){
                if (obj.innerText=='禁用'){
                    msg.innerText = "确定禁用？"
                } else {
                    msg.innerText = "确定启用？"
                }
            } else {

            }
            yes.onclick=function (ev) {
                al.style.display='none';

                var url;
                var info = {
                    'name': name,
                    'id':id
                };
                if (disable!=null){
                    url = '/futer/disableUser'
                } else {
                    url = '/futer/removeUser';
                }
                $.ajax({
                    type: "post",
                    url: url,
                    data:JSON.stringify(info) ,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response, ifo) {

                        if (response=='请求被拒绝，无权限访问'){
                            parent.sengToLogin();
                            return;
                        }

                        if (response==1){
                            window.location.href="/futer/userAdmin?page=${currentPage}";
                        }else if(response==2){
                            if (obj.innerText=='禁用'){
                                obj.innerText = '启用';
                            }else {
                                obj.innerText = '禁用';
                            }
                            showAlert("操作成功!","green");
                        }else {
                            showAlert("操作失败!","red");
                        }
                    }, error: function (err) {
                        showAlert("操作失败!","red");
                    }
                })
            }
            no.onclick=function (ev) {
                al.style.display='none';
            }
        }

        function showAlert(msg,color) {
            (document.getElementById("al")).style.backgroundColor=color;
            (document.getElementById("al")).innerText=msg;
            (document.getElementById("al")).style.zIndex='999';
            (document.getElementById("al")).style.display='block';
            setTimeout(hiddenAl,2000);
        }

        function search(){
            var name=document.getElementById("fu-search");
            var info = {
                'name': name.value
            };
            $.ajax({
                type: "post",
                url: "/futer/search",
                data:JSON.stringify(info) ,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response, ifo) {

                    if (response=='请求被拒绝，无权限访问'){
                        parent.sengToLogin();
                        return;
                    }

                    if (response!=null){

                        var date=new Date(response.createdate);
                        var year=date.getFullYear();
                        var month=date.getMonth()+1;
                        var day=date.getDate();
                        var hour=date.getHours();
                        var min=date.getMinutes();


                        var searchresult=document.getElementById("fu-userTable");
                        var title='<tr class="info">\n' +
                            '                <td align="center"><input type="checkbox"/></td>\n' +
                            '                <td>名称</td>\n' +
                            '                <td>时间</td>\n' +
                            '                <td>类型</td>\n' +
                            '                <td>操作</td>\n' +
                            '            </tr>';

                        if (response.name!='${sessionScope.name}'){
                            if (response.id>${sessionScope.id}){
                                title=title+'<tr class="info">\n' +
                                    '                        <td  align="center" ><input type="checkbox"/></td>\n' +
                                    '                        <td >'+response.name+'</td>\n' +
                                    '                        <td >'+year+'-'+month+'-'+day+'</td>\n' +
                                    '                        <td >'+response.type+'</td>\n' +
                                    '                        <td align="left">\n' +
                                    '                            <a href="/futer/userDetail?name='+response.name+'">详情</a>\n' +
                                    '                             <a href="#" onclick="remove(\''+response.name+'\',\''+response.id+'\')">移除 </a>\n' +
                                    '\n' +
                                    '                        </td>\n' +
                                    '                    </tr>';
                            }
                        }else {
                            title=title+'<tr class="info">\n' +
                                '                        <td  align="center" ><input type="checkbox"/></td>\n' +
                                '                        <td >'+response.name+'</td>\n' +
                                '                        <td >'+year+'-'+month+'-'+day+'</td>\n' +
                            '                        <td>'+response.type+'</td>\n' +
                            '                        <td align="left">\n' +
                            '                            <a href="/futer/userDetail?name='+response.name+'">详情</a>\n' +
                            '                        </td>\n' +
                            '                    </tr>';
                        }
                        searchresult.innerHTML=title;

                    }
                }, error: function (err) {
                    alert("查找失败！");
                }
            })
        }
    </script>
</div>
</body>
</html>
